<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" id="hotelHomeForm">
    <input name="hotelId" id="hotelId" type="hidden"/>
    <input name="id" id="id" type="hidden"/>
    <input name="bannerPhoto" id="bannerPhoto" type="hidden"/>
    <input name="homePhoto" id="homePhoto" type="hidden"/>
    <br/>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label">房间名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="homeName" id="homeName" required
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label">房间介绍:</label>
        <div class="layui-input-inline" style="width: 300px">
            <input type="text" name="homeInfo" id="homeInfo" required
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label">房间数量:</label>
        <div class="layui-input-inline" style="width: 300px">
            <input type="text" name="homeNum" id="homeNum" required
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label">房间价格:</label>
        <div class="layui-input-inline" style="width: 300px">
            <input type="text" name="price" id="price" required
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label">房间原价:</label>
        <div class="layui-input-inline" style="width: 300px">
            <input type="text" name="stdPrice" id="stdPrice" required
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label" style="width: 80px">关房时间:</label>
        <div class="layui-input-inline" style="width:10%">
            <input type="text" class="layui-input" id="openStart" name="openStart">
        </div>
        <div class="layui-input-inline" style="width:10%">
            <input type="text" class="layui-input" id="openEnd" name="openEnd">
        </div>
    </div>
    <div class="layui-form-item" id="imgDiv" style="margin-left: 20%;width: 99%">
        <label class="layui-form-label">房间图片:</label>
        <div class="layui-input-inline">
            <a id="uploadPhoto" class="layui-btn" style="margin-top: 15px;">上传图片</a>
        </div>
        <div class="layui-input-inline" style="width: 600px;margin-left: -50px">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                <div class="layui-upload" style="height: 280px">
                    <div class="layui-upload-list" id="demo2"></div>
                </div>
            </blockquote>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;" id="img2Div">
        <label class="layui-form-label">首页展示图片:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 450px;height: 245px">
                <div class="image-preview" style="width: 450px;height: 245px">
                    <div class="image">
                        <img src="" id="img" style="width: 450px;height: 245px">
                        <span class="image-browse" style="width: 450px" id="uploadFun"><strong>上传图片</strong><span
                                style="width: 450px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="width: 300px"><span style="color: red">图片类型:JPG/JPEG/PNG 推荐尺寸:750*430</span>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20%;">
        <label class="layui-form-label">房间设施:</label>
        <div class="layui-input-block" id="homeFacilityDiv">

        </div>
    </div>
    <button class="layui-btn" id="formSubmit" lay-submit="" lay-filter="formSubmit" style="display: none">立即提交</button>
</form>
<script th:replace="/common/inc::incJs"></script>
<style type="text/css">
    .deleteBtn {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 1;
    }
</style>
<script>
    var form = layui.form;
    var successCallback;
    var hotelId = getQueryString("hotelId");
    var id = getQueryString("id");
    var photoList = "";
    $("#hotelId").val(hotelId);

    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //多图片上传
        upload.render({
            elem: '#uploadPhoto'
            , url: '/backend/security/hotelPhoto/updateSynthesisImg' //此处配置你自己的上传接口即可
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    if (file.size > 1024 * 1024) {
                        // delete files[index];                     //过大删除指定图片
                        // $('#remove_' + index).remove();   //展示容器移除
                        layer.msg('图片大小不得超过1M', {icon: 2});
                    }
                });
            }
            , done: function (res) {

                $('#demo2').append('<div class="layui-input-inline layui-input-inline2" style="width: 150px;height:100px;margin-left: 20px;margin-top: 20px"><img src="/static/data/images/' + res.body + '" name="' + res.body + '" class="layui-upload-img" style="width: 150px;height: 100px">' +
                    '<span class="image-browse" onclick="deleteThisPhoto()"><strong class="deleteBtn">删除</strong><span class="progress"><span class="progress-bar"></span></span></span></div>')

                photoList = photoList + ",/static/data/images/" + res.body;
                if (photoList.substr(0, 1) == ',') {
                    photoList = photoList.substr(1);
                }
                $("#homePhoto").val(photoList);
            }
        });


        var uploadInst1 = upload.render({
            elem: '#uploadFun'
            , url: '/backend/security/hotelPhoto/updateSynthesisImg' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    if (file.size > 1024 * 1024) {
                        // delete files[index];                     //过大删除指定图片
                        // $('#remove_' + index).remove();   //展示容器移除
                        layer.msg('图片大小不得超过1M', {icon: 2});
                    } else {
                        $('#img').attr('src', result); //图片链接（base64）
                    }
                });
            }
            , done: function (res) {
                $("#bannerPhoto").val("/static/data/images/" + res.body);
            }
            , error: function (res) {

            }
        });
    });

    var delFun = function (obj) {
        $("#" + obj).remove();
    };

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#openStart', //指定元素
            format: 'yyyy-MM-dd'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#openEnd', //指定元素
            format: 'yyyy-MM-dd'
        });

    });

    //监听提交
    form.on('submit(formSubmit)', function (data) {
        if ($("homePhoto").val() == "") {
            layer.msg("房间图片不能为空");
            return false;
        }

        var basic_equipment = [];
        var general_equipment = [];
        var bathroom_equipment = [];
        var household_equipment = [];
        var service_equipment = [];
        var hotel_facility = {};

        $.each($('.basic_equipment input:checkbox:checked'), function () {
            basic_equipment.push({"name": $(this).attr("title"), "img": $(this).attr("value")});
        });

        $.each($('.general_equipment input:checkbox:checked'), function () {
            general_equipment.push({"name": $(this).attr("title"), "img": $(this).attr("value")});
        });

        $.each($('.bathroom_equipment input:checkbox:checked'), function () {
            bathroom_equipment.push({"name": $(this).attr("title"), "img": $(this).attr("value")});
        });

        $.each($('.household_equipment input:checkbox:checked'), function () {
            household_equipment.push({"name": $(this).attr("title"), "img": $(this).attr("value")});
        });

        $.each($('.service_equipment input:checkbox:checked'), function () {
            service_equipment.push({"name": $(this).attr("title"), "img": $(this).attr("value")});
        });

        hotel_facility.basic = basic_equipment;
        hotel_facility.general = general_equipment;
        hotel_facility.bathroom = bathroom_equipment;
        hotel_facility.household = household_equipment;
        hotel_facility.service = service_equipment;
        data.field.homeFacility = JSON.stringify(hotel_facility);

        if (id != "") {
            $.post('/backend/security/hotelHome/update', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                } else {
                    layer.msg('操作成功');
                    successCallback && successCallback();
                    parent.hotelHomeTabIns.reload();
                }
            });
        } else {
            $.post('/backend/security/hotelHome/add', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                } else {
                    layer.msg('操作成功');
                    successCallback && successCallback();
                    parent.hotelHomeTabIns.reload();
                }
            });
        }
        return false;
    });


    var formSubmit = function (callback) {
        successCallback = callback;
        $("#formSubmit").click();
    };

    $(function () {
        $("body").on("click", ".layui-input-inline .deleteBtn", function () {
            var photoStr = $(this).parents(".layui-input-inline2").find(".layui-upload-img").attr("name");
            var homePhotoStr = $("#homePhoto").val().replace("" + photoStr + ",", "").replace("," + photoStr + "", "");
            $("#homePhoto").val(homePhotoStr);
            $(this).parents(".layui-input-inline2").remove();
        })

        if (id != "") {
            //$("form").loadData('/backend/security/user/getById?id=' + id);
            $.post('/backend/security/hotelHome/getById', {id: id}, function (result) {
                if (result.code < 0) {
                    layer.msg(res.message);
                } else {
                    $("#hotelHomeForm").loadData(result.body);
                    //$("#img").attr("src", result.body.homePhoto);
                    photoList = $("#homePhoto").val();
                    $("#img").attr("src", result.body.bannerPhoto);
                    if (result.body.homePhoto != null) {
                        if (result.body.homePhoto.split(",").length > 0) {
                            for (var i = 0; i < result.body.homePhoto.split(",").length; i++) {
                                $('#demo2').append('<div class="layui-input-inline layui-input-inline2" style="width: 150px;height:100px;margin-left: 20px;margin-top: 20px"><img src="' + result.body.homePhoto.split(",")[i] + '" name="' + result.body.homePhoto.split(",")[i] + '" class="layui-upload-img" style="width: 150px;height: 100px">' +
                                    '<span class="image-browse" onclick="deleteThisPhoto()"><strong class="deleteBtn">删除</strong><span class="progress"><span class="progress-bar"></span></span></span></div>')
                            }
                        }
                    }

                    //获取标签基础信息
                    $.post('/backend/security/sysDictionary/findList', function (res) {
                        if (res.code < 0) {
                            layer.msg(res.message);
                        } else {
                            var facilityDiv = "";
                            var dictEntry = res.body[0].dictEntry;
                            var dictName;
                            if (dictEntry == "basic_equipment") {
                                dictName = "基础设备";
                            }
                            if (dictEntry == "bathroom_equipment") {
                                dictName = "卫浴设备";
                            }
                            if (dictEntry == "household_equipment") {
                                dictName = "家用电器";
                            }
                            if (dictEntry == "general_equipment") {
                                dictName = "通用设施";
                            }
                            if (dictEntry == "service_equipment") {
                                dictName = "服务项目";
                            }
                            facilityDiv = facilityDiv + "<label class=\"layui-form-label\">" + dictName + "</label> <div class=\"layui-input-block " + dictEntry + "\">";
                            for (var i = 0; i < res.body.length; i++) {
                                if (dictEntry == res.body[i].dictEntry) {
                                    facilityDiv = facilityDiv + "<input type=\"checkbox\" name=\"" + res.body[i].dictEntry + "_" + i + "" + "\" title=\"" + res.body[i].dictPrompt + "\" value=\"" + res.body[i].dictImg + "\">";
                                } else {
                                    if (res.body[i].dictEntry == "basic_equipment") {
                                        dictName = "基础设备";
                                    }
                                    if (res.body[i].dictEntry == "bathroom_equipment") {
                                        dictName = "卫浴设备";
                                    }
                                    if (res.body[i].dictEntry == "household_equipment") {
                                        dictName = "家用电器";
                                    }
                                    if (res.body[i].dictEntry == "general_equipment") {
                                        dictName = "通用设施";
                                    }
                                    if (res.body[i].dictEntry == "service_equipment") {
                                        dictName = "服务项目";
                                    }
                                    facilityDiv = facilityDiv + "</div>";
                                    facilityDiv = facilityDiv + "<br/><label class=\"layui-form-label\">" + dictName + "</label> <div class=\"layui-input-block " + res.body[i].dictEntry + "\">";
                                    facilityDiv = facilityDiv + "<input type=\"checkbox\" name=\"" + res.body[i].dictEntry + "_" + i + "" + "\" title=\"" + res.body[i].dictPrompt + "\" value=\"" + res.body[i].dictImg + "\">";
                                }
                                dictEntry = res.body[i].dictEntry;
                            }
                            facilityDiv = facilityDiv + "</div>";
                            $("#homeFacilityDiv").html(facilityDiv);
                            layui.form.render();


                            var facilityStr = result.body.homeFacility;
                            if (facilityStr.basic.length > 0) {
                                for (var i = 0; i < facilityStr.basic.length; i++) {
                                    $.each($('.basic_equipment input:checkbox'), function () {
                                        if ($(this).attr("title") == facilityStr.basic[i].name)
                                            $(this).prop('checked', true);
                                    });
                                }
                            }
                            if (facilityStr.general.length > 0) {
                                for (var i = 0; i < facilityStr.general.length; i++) {
                                    $.each($('.general_equipment input:checkbox'), function () {
                                        if ($(this).attr("title") == facilityStr.general[i].name)
                                            $(this).prop('checked', true);
                                    });
                                }
                            }
                            if (facilityStr.bathroom.length > 0) {
                                for (var i = 0; i < facilityStr.bathroom.length; i++) {
                                    $.each($('.bathroom_equipment input:checkbox'), function () {
                                        if ($(this).attr("title") == facilityStr.bathroom[i].name)
                                            $(this).prop('checked', true);
                                    });
                                }
                            }
                            if (facilityStr.household.length > 0) {
                                for (var i = 0; i < facilityStr.household.length; i++) {
                                    $.each($('.household_equipment input:checkbox'), function () {
                                        if ($(this).attr("title") == facilityStr.household[i].name)
                                            $(this).prop('checked', true);
                                    });
                                }
                            }
                            if (facilityStr.service.length > 0) {
                                for (var i = 0; i < facilityStr.service.length; i++) {
                                    $.each($('.service_equipment input:checkbox'), function () {
                                        if ($(this).attr("title") == facilityStr.service[i].name)
                                            $(this).prop('checked', true);
                                    });
                                }
                            }

                            layui.form.render();
                        }
                    });
                }
            });
        } else {
            //获取标签基础信息
            $.post('/backend/security/sysDictionary/findList', function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                } else {
                    var facilityDiv = "";
                    var dictEntry = res.body[0].dictEntry;
                    var dictName;
                    if (dictEntry == "basic_equipment") {
                        dictName = "基础设备";
                    }
                    if (dictEntry == "bathroom_equipment") {
                        dictName = "卫浴设备";
                    }
                    if (dictEntry == "household_equipment") {
                        dictName = "家用电器";
                    }
                    if (dictEntry == "general_equipment") {
                        dictName = "通用设施";
                    }
                    if (dictEntry == "service_equipment") {
                        dictName = "服务项目";
                    }
                    facilityDiv = facilityDiv + "<label class=\"layui-form-label\">" + dictName + "</label> <div class=\"layui-input-block " + dictEntry + "\">";
                    for (var i = 0; i < res.body.length; i++) {
                        if (dictEntry == res.body[i].dictEntry) {
                            facilityDiv = facilityDiv + "<input type=\"checkbox\" name=\"" + res.body[i].dictEntry + "_" + i + "" + "\" title=\"" + res.body[i].dictPrompt + "\" value=\"" + res.body[i].dictImg + "\">";
                        } else {
                            if (res.body[i].dictEntry == "basic_equipment") {
                                dictName = "基础设备";
                            }
                            if (res.body[i].dictEntry == "bathroom_equipment") {
                                dictName = "卫浴设备";
                            }
                            if (res.body[i].dictEntry == "household_equipment") {
                                dictName = "家用电器";
                            }
                            if (res.body[i].dictEntry == "general_equipment") {
                                dictName = "通用设施";
                            }
                            if (res.body[i].dictEntry == "service_equipment") {
                                dictName = "服务项目";
                            }
                            facilityDiv = facilityDiv + "</div>";
                            facilityDiv = facilityDiv + "<br/><label class=\"layui-form-label\">" + dictName + "</label> <div class=\"layui-input-block " + res.body[i].dictEntry + "\">";
                            facilityDiv = facilityDiv + "<input type=\"checkbox\" name=\"" + res.body[i].dictEntry + "_" + i + "" + "\" title=\"" + res.body[i].dictPrompt + "\" value=\"" + res.body[i].dictImg + "\">";
                        }
                        dictEntry = res.body[i].dictEntry;
                    }
                    facilityDiv = facilityDiv + "</div>";
                    $("#homeFacilityDiv").html(facilityDiv);


                    layui.form.render();
                }
            });
        }
    })
</script>
</body>
</html>
